import Ctx2 from '../../assets/js/ctx2'

export default class TurnGame {
  constructor(obj) {
    let config = {
      width: 500,
      height: 500,
      lightNum: 12,
      addNum: 1,
      prizeList: [],
      btnText: '开始',
      prizeNo: 0,
    }
    Object.assign(config, obj)
    this.lightNum = config.lightNum
    this.prizeList = config.prizeList
    this.btnText = config.btnText
    this.addNum = config.addNum
    this.prizeNo = config.prizeNo
    this.width = config.width
    this.height = config.width
    this.half = config.width / 2
    this.el = config.el
    this.vue = config.vue
    this.timer = null
    this.timer1 = null
    this.lightFlag = false
    this.rotate1 = 0
    this.rotate2 = 0
    this.colorArr = ['#ffe8b5', '#ffb933']
    let can = document.createElement('canvas')
    let dpr = window.devicePixelRatio
    can.style.width = this.width + 'px'
    can.style.height = this.height + 'px'
    can.width = dpr * this.width
    can.height = dpr * this.height
    config.el.appendChild(can)
    this.can = can
    this.ctx = new Ctx2(can.getContext('2d'), this.width, this.height)
    this.ctx.scale(dpr, dpr)
  }

  init() {
    this.rotate1 = 0

    if (this.timer) clearInterval(this.timer)
    this.timer = setInterval(() => {
      this.rotate1 = this.rotate1 + this.addNum
    }, 1000 / 60)

    this.ctx.onEvent(this.can)
    this.drawTurn()
  }

  stop() {
    if (this.timer) clearInterval(this.timer)
    this.rotate2 = 0
    this.addNum = 1
  }

  drawTurn() {
    let _this = this
    let arr1 = [
      {
        attr: [[this.half, this.half, this.half, 0, Math.PI * 2], '#f00'],
        type: this.ctx.arcFill,
      },
      {
        attr: [[this.half, this.half, this.half * 0.9], '#f069a8'],
        type: this.ctx.arcFill,
      },
    ]

    for (let i = 0; i < this.lightNum; i++) {
      let ww1 = this.half + this.half * 0.95 * Math.cos(((360 / this.lightNum) * i * Math.PI) / 180)
      let wh1 = this.half + this.half * 0.95 * Math.sin(((360 / this.lightNum) * i * Math.PI) / 180)

      arr1.push({
        attr: [[ww1, wh1, this.half * 0.04], '#fff'],
        type: this.ctx.arcFill,
        colorArr: [],
        handle() {
          _this.throttle(() => {
            _this.lightFlag = !_this.lightFlag
          })
          if (_this.lightFlag) {
            this.colorArr = ['#f5c058', '#fff']
          } else {
            this.colorArr = ['#fff', '#f5c058']
          }
          this.attr[1] = this.colorArr[i % this.colorArr.length]
        },
      })
    }

    // 礼物转盘动画
    for (var i = 0; i < this.prizeList.length; i++) {
      let rotateNum = (360 / this.prizeList.length) * i - (90 + 360 / this.prizeList.length / 2)
      let wwhhX = (this.width / 2) * 0.6 * 2 * Math.sin(((360 / this.prizeList.length / 2) * Math.PI) / 180)
      let wwhh = (Math.PI * 2 * this.width * 0.9) / this.prizeList.length / 7
      if (wwhh > this.half / 3.5) {
        wwhh = this.half / 3.5
      }

      arr1.push({
        save: true,
        rotate: [],
        handle() {
          this.rotate = [_this.half, _this.half, _this.rotate1]
        },
      })

      arr1.push({
        attr: [[this.half, this.half, this.half * 0.87, 0, (2 / this.prizeList.length) * Math.PI], this.colorArr[i % this.colorArr.length]],
        type: this.ctx.arcFill,
        save: true,
        rotate: [this.half, this.half, rotateNum],
      })

      arr1.push({
        attr: [this.prizeList[i].name, this.half * 1.1 + wwhhX / 2, this.height * 0.56, ['#333', '14px bold']],
        type: this.ctx.textFill,
        save: true,
        rotate: [this.half * 1.45, this.half * 1.3, 90 + 180 / this.prizeList.length],
      })

      arr1.push({
        attr: ['', this.half * 1.1 + wwhhX / 2 - wwhh / 2, this.height * 0.6, wwhh, wwhh],
        type: this.ctx.imgFill,
        restore: true,
        arrIndex: i,
        handle() {
          if (!this.attr[0]) {
            _this.ctx
              .loadImg(_this.prizeList[this.arrIndex].img)
              .then((res) => {
                this.attr[0] = res
              })
              .catch(() => {})
          }
        },
      })

      arr1.push({
        restore: true,
      })

      arr1.push({
        restore: true,
      })
    }

    let arr2 = [
      {
        attr: [
          [
            {
              x: this.half * 0.85,
              y: this.half,
            },
            {
              x: this.half * 1.15,
              y: this.half,
            },
            {
              x: this.half,
              y: this.half * 0.8,
            },
          ],
          '#f00',
        ],
        save: true,
        restore: true,
        globalAlpha: 0.5,
        type: this.ctx.edgeFill,
      },
      {
        attr: [[this.half, this.half, this.width * 0.075], '#f00'],
        type: this.ctx.arcFill,
        name: 'arcFill',
        click: (attr, ev) => {
          if (attr && attr.name === 'arcFill') {
            _this.playGame()
          }
        },
      },
      {
        attr: [this.btnText, this.half, this.half, ['#fff', '14px bold']],
        type: this.ctx.textFill,
      },
    ]

    this.ctx
      .push(arr1)
      .push(arr2)
      .show()
  }

  playGame() {
    if (this.vue.door1) {
      this.vue.door1 = false
      this.stop()
      this.rotate2 = (360 / this.prizeList.length) * (this.prizeList.length - this.vue.prizeNo) + 360 * 7
      this.animate(this.rotate2, this.rotate1 % 360, (val, end) => {
        if (end) {
          this.vue.door1 = true
          this.vue.$refs.infoText.show()
        }
        this.rotate1 = val
      })
    }
  }

  animate(to, start, fn) {
    let currentTime = 0
    let duration = 500
    let val = 0

    function easeInOutQuad(t, b, c, d) {
      t /= d / 2
      if (t < 1) {
        return (c / 2) * t * t + b
      }
      t--
      return (-c / 2) * (t * (t - 2) - 1) + b
    }

    function loop() {
      currentTime += 1
      val = easeInOutQuad(currentTime, start, to - start, duration)
      fn(val)
      if (currentTime < duration) {
        requestAnimationFrame(loop)
      } else {
        fn(val, 'end')
      }
    }
    loop()
  }

  throttle(fn, time = 1000) {
    // 节流
    if (!this.timer1) {
      this.timer1 = setTimeout(() => {
        clearTimeout(this.timer1)
        this.timer1 = null

        fn()

        this.throttle(fn, time)
      }, time)
    }
  }
}
